<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>编辑管理员</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :label-position="right"
      status-icon
      style="width: 80%"
    >
      <el-form-item label="角色" prop="role">
        <el-select v-model="ruleForm.role">
          <el-option
            v-for="item in role_data"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          placeholder="Please input password"
          show-password
        />
      </el-form-item>
      <el-form-item label="登录名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";

const router = useRouter();
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "管理员_测试",
  role: "",
  password: "",

  market: 1, //是否是销售
  last_time: "2022-12-10 20:18",
  last_ip: "120.33.39.47:11092",
});
const update_date = async () => {
  var { data } = await axios.get(
    `http://localhost:5200/guanliyuans/${route.query.id}`
  );
  console.log(data);
  ruleForm.name = data.name;
  ruleForm.role = data.role;
  ruleForm.password = data.password;
};
// 表单验证
const rules = reactive<FormRules>({
  role: [
    {
      required: true,
      message: "请选择角色名称",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "抱歉！密码不能为空",
      trigger: "blur",
    },
    {
      min: 6,
      max: 18,
      message: "为了您的安全请输入 6 到 18字符",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入你的登录名称",
      trigger: "blur",
    },
  ],
});

//获取角色数据
const role_data = ref([]);
const role = async () => {
  var { data } = await axios.get("http://localhost:5200/roles");
  role_data.value = data;
};

//确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(ruleForm);
      let res = await axios.patch(
        `http://localhost:5200/guanliyuans/${route.query.id}`,
        {
          ...ruleForm,
        }
      );
      formEl.resetFields();
      router.push("/sys/admin/list");
      if (res.status == 201) {
        ElNotification({
          title: "Success",
          message: `角色名称为${res.data.role_name}修改成功`,
          type: "success",
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/sys/admin/list");
};
onMounted(() => {
  role()
  update_date();
});
</script>

<style></style>
